<template>
  <div class="operation-data">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>运营数据看板</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="用户增长趋势" name="userGrowth">
            <div class="chart-container">
              <el-card>
                <div ref="userChartRef" style="width: 100%; height: 400px;"></div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="业务量统计" name="businessVolume">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">12,345</div>
                    <div class="stat-label">今日交易笔数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">¥1,234,567</div>
                    <div class="stat-label">今日交易金额</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">98.5%</div>
                    <div class="stat-label">对账成功率</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          
          <el-tab-pane label="收入分析" name="incomeAnalysis">
            <div class="chart-container" style="margin-top: 20px;">
              <el-card>
                <div ref="incomeChartRef" style="width: 100%; height: 400px;"></div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('userGrowth')
const userChartRef = ref()
const incomeChartRef = ref()

// 这里可以添加图表渲染逻辑
</script>

<style scoped>
.operation-data {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.chart-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}

.stat-card {
  text-align: center;
}

.stat-item {
  padding: 20px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}
</style>